<template>
  <div>
    <el-row>
      <el-col :span="15">
        <div class="mutil-select">
          <div class="select-title">
            <div class="ht"><span>选择广告位</span></div>
            <div class="title-panel">
              <el-button @click="selectAll" size="mini"><span>选择全部</span></el-button>
            </div>
          </div>

          <div class="select-search">
            <!--  -->
            <el-col :span="7">
              <el-select
                v-model="formData.placeType"
                size="mini"
                 v-on:change="onKeywordChange"
                placeholder="请选择广告位类型"
                :style="{ width: '90%' }"
              >
                <el-option
                  v-for="(item, index) in placeTypeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <!--  -->
            <el-col :span="7">
              <el-select
                v-model="formData.adtags"
                placeholder="全部"
                size="mini"
                filterable
                v-on:change="onKeywordChange"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in adtagsOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-col>
            <!--  -->
            <el-col :span="7" class="select-search-right">
              <el-input
                placeholder="广告位名称或ID"               
                size="mini"
                v-model="formData.keyword"
                class="input-with-select"
              >
                <el-button slot="append" @click="onKeywordChange" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
            <!--  -->
          </div>
          <div class="mutil-items-list">
                <el-table
                    ref="firstTable"
                    v-bind:data="tableList"  
                    @row-click="firstTableRowClick"    
                    v-loading="tableLoading"                    
                    style="width: 100%">
                <el-table-column                     
                     label="ID" width="80" >
                     <template  slot-scope="scope">
                         <span  :class="scope.row.checked?'blod':''">
                        {{scope.row.id}}</span>
                     </template>
                     </el-table-column>
                <el-table-column                   
                     label="广告位名称" >
                     <template  slot-scope="scope">
                         <span  :class="scope.row.checked?'blod':''">
                         {{scope.row.placeName}}</span>
                     </template>
                     </el-table-column>
                <el-table-column                     
                     label="类型" width="90" >  
                     <template  slot-scope="scope">
                        <span  :class="scope.row.checked?'blod':''">
                          {{scope.row.placeType|filter_placeType}}</span>
                      
                      
                     </template>
                     </el-table-column>       
                <el-table-column                     
                     label="尺寸"   width="90">
                      <template  slot-scope="scope">
                        <span  :class="scope.row.checked?'blod':''">
                           {{scope.row.placeWidth}}{{scope.row.sizeDot}}{{scope.row.placeHeight}}
                          </span>
                        
                     </template>
                     </el-table-column> 
                <el-table-column
                     
                     label="载体类型"  width="90">
                     <template  slot-scope="scope">
                         <span  :class="scope.row.checked?'blod':''">
                         {{scope.row.adtype|filter_adtype}}</span>
                     </template>
                     </el-table-column> 
                <el-table-column
                     prop="adtype"
                     label="" width="60" >
                     <template  slot-scope="scope">
                         <i v-if="scope.row.checked" class="ck el-icon-check"></i>
                         <i v-else class="ck el-icon-right iconshow"></i>
                     </template>
              </el-table-column> 

                </el-table>
          </div>
        </div>
      </el-col>
      <!-- 右侧选取结果 -->
      <el-col :span="7">
  <div class="mutil-select results" >
          <div class="select-title">
            <div class="ht"><span>已选择广告位</span></div>
            <div class="title-panel">
              <el-button  @click="deleteAll"  size="mini"><span>删除全部</span></el-button>
            </div>
          </div>
    <div class="select-search">
        <p>请从左侧选择你要的广告位</p>
    </div>
    <!--  -->
    <div class="mutil-items-list">
                <el-table
                    ref="resultTable"
                    v-bind:data="resultList"  
                    @row-click="resultTableRowClick"  
                                       
                    style="width: 100%">
                <el-table-column                    
                     label="广告位" >
                 <template  slot-scope="scope">
                        <span>{{scope.row.placeName}}</span>
                        <span>[{{scope.row.placeWidth}}{{scope.row.sizeDot}}{{scope.row.placeHeight}}]</span>
                     </template>     
               </el-table-column>
                
                <el-table-column
                     prop="adtype"
                     label="" width="60px" >
                     <template  slot-scope="scope">
                         <i v-if="scope.row.checked" class="ck el-icon-close"></i>
                        
                     </template>
              </el-table-column> 

                </el-table>
          </div>
    <!--  -->
  </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Options from "./Options";
export default {
  components: {},
  props: {
    "plattype":{
      default: 0
    },
    "resultIds":{
      default:undefined
    }
  },
  data() {
    return {
      formData: {
        adtype:0,
        placeType: 0,
        adtags: "",
        keyword: "",
      },
      adtagsOptions: [
        { label: "全部",  value: 0, },
        {  label: "首页",  value: 1, },
        { label: "PC底部", value: 2, },
      ],

      tableLoading: false,
      tableList:[],
//  {id: '11001', name: '横幅A3', placetype: '悬浮', adsize:'200*60', adtype:'PC',checked: false },
   
      resultList:[]
    };
  },
  computed: {
    adtype() {
      return this.plattype;
    },
    placeTypeOptions() {
      var type = {
        1: [ { label: "全部", value: 0 },{ label: "嵌入", value: 1 }],
        2: [
           { label: "全部", value: 0 },
          { label: "嵌入", value: 1 },
          { label: "悬浮", value: 2 },
        ],
        3: [
          { label: "全部", value: 0 },
          { label: "嵌入", value: 1 },       
          { label: "开屏", value: 3 },
          { label: "信息流", value: 4 },
        ],
        4: [
           { label: "全部", value: 0 },
          { label: "嵌入", value: 1 },
          { label: "悬浮", value: 2 },
        ],
      };
      if(this.plattype  ){
        return type[ this.plattype]
      }else{
          return type[1];
      }
      
    },
  },
  created(){
     // if(this.resultIds){
        //获取已经选中 的广告位 编辑的时候
        // 初始化 获取 右侧已经选中的列表，再获取左侧可选列表；
        // 并赋值 左侧已选状态；
        this.getEditResultList();
    //  }
      
  },
  filters:{
      filter_adtype(value){ return Options.filter_adtype( value) ;},  
      filter_placeType (value){  return Options.filter_placeType( value) ;}, 
  },
  watch:{
    // 监听adtype变化 获取对应平台的广告位
    adtype: function(n, o){
      this.getTableList();
      //this.resultList = [];
    }
  },
  methods: {
    //   搜索框事件
    onKeywordChange() {
      this.getTableList();
    },
    getTableList(){
        this.tableLoading = true;
        this.formData['adtype'] = this.adtype;
        PlaceAPI.getAllsPlace(1, 1000, this.formData).then( (data) =>{
          // console.log(data)
          this.tableLoading = false;
          //获取到广告位列表
          for(var i in data.data){
            data.data[i]['checked'] = false;
            //设置 选中状态
            for(var k in this.resultList){
              if(data.data[i].id==  this.resultList[k].id){
                 data.data[i]['checked'] = true;
              }
            }
          }
          this.tableList = data.data;
      })
    },
    //获取已经选中的 广告位
    getEditResultList(){
      PlaceAPI.getAllsPlace(1, 1000, {ids: this.resultIds}).then( (data) =>{
          for(var i in data.data){
            data.data[i]['checked'] = true;
          }
          this.resultList = data.data;
          return this.resultList;
      }).then(()=>{
          //获取广告位
              this.getTableList();
      });
    },
    //左边table 的row 被单击时
    //  改变tableList 某 row 
    _change(row){
        for(var index in this.tableList){
             if(this.tableList[index]['id'] ==  row.id){               
                 this.tableList[index]['checked'] =  row['checked'];                 
             }
         }
       
    },
    firstTableRowClick:function(row){
         if(row.checked){
             return true;
         }
        //  设置tableList 数组点击的行 checked= true
        row.checked = true;
        this._change(row);
        this.resultList.push(row)
        //this.$refs['firstTable'].setCurrentRow( row )
        this.submitForm();   
    },
    resultTableRowClick: function(row){
        for(var index in this.resultList){
             if(this.resultList[index]['id'] ==  row.id){
                 this.resultList.splice(index,1)                 
             }
         }
         //改变原数组,不选中 checked =false
        row.checked = false;
        this._change(row);
        this.submitForm();
    },
    selectAll(){
        this.resultList = [];
         for(var index in this.tableList){
            var row = this.tableList[index];
            row.checked = true;
            this._change(row);
            this.resultList.push(row)
         }
         this.submitForm();
    },
    deleteAll(){
        for(var index in this.resultList){
            this.resultList[index]['checked']  = false;
            this._change(this.resultList[index]);
        }
        this.resultList = [];
        this.submitForm();
    },
    submitForm() {
      /**判断 加入的是否是相同类型和尺寸的广告位 */
      if(this.resultList.length==0){
        return ;
      }
      console.log(this.resultList)
      var check = true;
      var first = this.resultList[0];
      for(var i in this.resultList){
        if(first.adtype != this.resultList[i].adtype){
              check = check && false;
        }
        if(first.placeWidth != this.resultList[i].placeWidth){
              check = check && false;
        }
        if(first.placeHeight != this.resultList[i].placeHeight){
              check = check && false;
        }
      }
      if(!check){
        this.$emit('onchangeselect', {'ids': [], 'rows': this.resultList});
        return; // 不是相同类型的广告位代码
      }

      var tmp = [];
      for(var k in this.resultList ){        
        tmp.push( this.resultList[k]['id']);
      }
      
      this.$emit('onchangeselect', {'ids': tmp, 'rows': this.resultList});
    },
    resetForm() {},
  },
};
</script>
